<template>
    <view class="container">
        <view class="title row">
            <view>{{ basic.name }}</view>
            <view class="contact short-btn" @click="onCall">
                <image
                    src="../../static/common/call.png"
                    class="contact-icon"
                />联系TA</view
            >
        </view>
        <view @click="onCall" class="conmany-msg">
            联系人：
            <text class="bold">{{ basic.real_name }}</text>
            <view class="phone short-btn">
                <image
                    src="../../static/common/call-mini.png"
                    class="phone-icon"
                />{{ basic.mobile }}
            </view>
        </view>
        <view class="conmany-msg row">
            <view
                >在保人数：<text class="bold">{{
                    basic.active_num
                }}</text></view
            >
            <view
                >账户余额：<text class="bold">¥{{ basic.balance }}</text></view
            >
        </view>
        <view class="company-table">
            <view class="table-th table-tr">
                <view class="table-td">类型</view>
                <view class="table-td">人数</view>
                <view class="table-td">时间</view>
            </view>
            <view
                class="table-tr"
                v-for="(item, index) in orderList"
                :key="index"
            >
                <view class="table-td">
                    <image
                        class="insurance-icon"
                        v-if="item.type === '加保'"
                        src="../../static/common/add.png"
                    />
                    <image
                        class="insurance-icon"
                        v-else-if="item.type === '减保'"
                        src="../../static/common/subtract.png"
                    />
                    <image
                        class="insurance-icon"
                        v-else
                        src="../../static/common/renew.png"
                    />
                    {{ item.type }}</view
                >
                <view class="table-td">{{ item.person_count }}</view>
                <view class="table-td">{{ item.start_date }}</view>
            </view>
        </view>
    </view>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import {
    ClientDetailDto,
    ClientOrderDto,
    getClientDetail,
    getClientOrder
} from '@/api/client'
import { onReachBottom } from '@dcloudio/uni-app'
const props = defineProps(['id'])
const basic = ref({} as ClientDetailDto)
const orderList = ref([] as ClientOrderDto[])

let page = 1
let total = 0

const onCall = () => {
    uni.makePhoneCall({
        phoneNumber: basic.value.mobile
    })
}

const getOrder = async () => {
    const result = await getClientOrder({
        clientId: props.id,
        page
    })
    orderList.value.push(...result.data)
    total = result.total
}
const getBasic = async () => {
    const result = await getClientDetail({
        clientId: props.id
    })
    basic.value = result
}

onReachBottom(() => {
    if (total === orderList.value.length) {
        return
    }
    page += 1
    getOrder()
})
;(async () => {
    getOrder()
    getBasic()
})()
</script>
<style lang="scss" scoped>
.container {
    background-color: $uni-color-green;
    min-height: 100vh;
    @include padding(0 24rpx);
    color: white;
}
.contact {
    width: 170rpx;
    height: 60rpx;
    background: #ffffff;
    border-radius: 36rpx;
    color: $uni-color-green;
    font-size: $uni-font-size-base;
    &-icon {
        width: 24rpx;
        height: 24rpx;
        margin-right: 8rpx;
    }
}
.title {
    margin-top: 30rpx;
    font-size: $uni-font-size-h3;
    font-weight: bold;
    margin-bottom: 14rpx;
}
.conmany-msg {
    font-size: $uni-font-size-lg;
    padding: 12rpx 0;
    display: flex;
}

.phone {
    width: 202rpx;
    height: 36rpx;
    background: #fbfbfd;
    border-radius: 18rpx;
    color: #646a73;
    font-size: $uni-font-size-sm;
    margin-left: 24rpx;
    &-icon {
        width: 24rpx;
        height: 24rpx;
        margin-right: 8rpx;
    }
}

.company-table {
    @include padding(0 24rpx 40rpx);
    background-color: white;
    min-height: 90vh;
    width: 700rpx;
    margin: 40rpx auto 0;
    border-radius: $uni-border-radius-base;
    color: $uni-text-color;
    font-size: $uni-font-size-lg;
}
.table-tr.table-th {
    font-size: $uni-font-size-h4;
    color: $uni-text-color;
    border-bottom: unset;
}
.table-tr {
    display: flex;
    justify-content: space-between;
    padding: 30rpx 0;
    border-bottom: 1px solid $uni-border-color;
}
.table-td:nth-of-type(1) {
    flex: 1;
    display: flex;
    align-items: center;
}
.table-td:nth-of-type(2) {
    text-align: center;
    flex: 1;
}
.table-td:nth-of-type(3) {
    text-align: right;
    flex: 1;
}
.insurance-icon {
    width: 30rpx;
    height: 30rpx;
    margin-right: 6rpx;
}
</style>
